import React,{useState,useEffect} from 'react';
import useSize from './useSize';

// function FunFoo(){
//     const [count,setCount] = useState(0);

//     const add = () => {
//         // setCount(count+1)
//         // setCount([...count,4])
//         setTimeout(() => {
//             // setCount(count+1)
//             setCount(prevCount => prevCount+2)
//         },1000)
//         // setCount(prevCount => prevCount+2)
//     }
//     return <div>
//         {count}
//         {/* {count.map(item => <span>{item}</span>)} */}
//         <button onClick={add}>add</button>
//     </div>
// }

function Child(){
    useEffect(() => {
        return () => {
            console.log("组件卸载")
        }
    })
    return <div>12</div>
}


function FunFoo(){
    // let [size,setSize] = useState([window.innerWidth,window.innerHeight])

    // let [status,setStatus] = useState(true)

    // const onResize = () => {
    //     setSize([window.innerWidth,window.innerHeight])
    // }
    

    // useEffect(() => {
    //     console.log("size",size)
    //     window.addEventListener('resize',onResize);
    //     return () => {
    //         window.removeEventListener('resize',onResize);
    //     }
    // },[])

    // useEffect(() => {
    //     console.log("===")
    //     document.title = size.join("x")
    // },[size])

    let size = useSize();

    return <div>
        {size[0]} {size[1]}
        {/* {status ? <Child/> :<></>}
        <button onClick={() => {setStatus(false)}}>卸载child</button> */}
    </div>
}

export default FunFoo
